<template>
  <div class="container">
    <el-dialog
      title="查看"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <p>用户微信：{{ showObj.weixin }} </p>
      <p>会员手机：{{ showObj.tel }} </p>
      <p>课程名称：{{ typeCase[showObj.classname] }} </p>
      <p>订单金额：{{ showObj.money }} </p>
      <p>订单状态：{{ typeObj[showObj.type] }} </p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>

    <div class="title">
      <span>订单列表</span>
      <el-button type="primary" @click="bathDeletefun">批量删除</el-button>
    </div>
    <div class="header">
      <span>订单编号</span>
      <span class="span1">用户微信</span>
      <span>会员手机</span>
      <span class="span1">课程名称</span>
      <span>订单金额（元）</span>
      <span>订单状态</span>
      <span>提交时间</span>
      <span>操作</span>
    </div>
    <el-table
    ref="multipleTable"
    :data="myarr"
    @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="75">
      </el-table-column>
      <el-table-column
        prop="ordernum"
        width="150">
      </el-table-column>
      <el-table-column
        prop="weixin"
        width="100">
      </el-table-column>
      <el-table-column
        width="120">
        <template slot-scope="scope">
          <span>{{ scope.row.tel.regexp }}</span>
        </template>
      </el-table-column>
      <el-table-column
      width="140">
        <template slot-scope="scope">
          <span>{{ typeCase[scope.row.classname] }}</span>
        </template>
      </el-table-column>
      
      <el-table-column
        prop="money"
        width="135">
      </el-table-column>
    
      <el-table-column
        width="110">
        <template slot-scope="scope">
            <span>{{ typeObj[scope.row.type] }}</span>
        </template>
      </el-table-column>
        <el-table-column
        prop="submittime"
        width="160">
      </el-table-column>
      <el-table-column>
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            @click="handleEdit(scope.row)">查看</el-button>
          <el-button
            size="mini"
            type="info"
            @click="handleDelete(scope.row.id)">取消</el-button>
        </template>
      </el-table-column>
  </el-table>
  </div>
</template>

<script>

import { delteByIdApi,bachDeleteApi } from '../../../api/OrderApi'
export default {
  props:['typeObj','myarr','typeCase'],

   data() {
      return {
        dialogVisible: false,
        multipleTable: [],
        showObj:{},
      }
    },
    methods: {
     
      handleClose(done) {
        this.showObj = {};
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },

      handleEdit(row){
        this.showObj = row;
        console.log(row);
        this.dialogVisible = true;
      },
      
      handleDelete(id){
        //删除
        delteByIdApi({id:id}).then(res=>{
          if(res.code==200){
            this.$emit('reseList');
          }
        })
      },

       //批量删除
      bathDeletefun(){
        var idArr = this.multipleTable.map(item=>item.id);
        var ids = idArr.join(',')
        bachDeleteApi({ids:ids}).then(res=>{
          if(res.code==200){
            this.$emit('reseList');
          }
        })
      },

      handleSelectionChange(val) {
        this.multipleTable = val;
      },

      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },

    }

}
</script>    
    
<style lang="less" scoped>
  .container{
    // height: 480px;
    .title{
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 52px;
      line-height:52px;
      padding-left:30px;
      background-color: #fff;
      span{
        font-weight:bold;
      }
    }
    .header{
      height: 42px;
      line-height: 42px;
      .span1{
          margin-left: 70px;
          font-size:14px;
          font-weight:bolder; 
      }
      span:nth-child(1){
          margin-left: 104px;
          font-size:14px;
          font-weight:bolder; 
      }
      span:nth-child(3){
          margin-left: 52px;
          font-size:14px;
          font-weight:bolder; 
      }
       span:nth-child(5){
          margin-left: 58px;
          font-size:14px;
          font-weight:bolder; 
      }
       span:nth-child(6){
          margin-left: 42px;
          font-size:14px;
          font-weight:bolder; 
      }
       span:nth-child(7){
          margin-left: 80px;
          font-size:14px;
          font-weight:bolder; 
      }
       span:nth-child(8){
          margin-left: 136px;
          margin-right: 90px;
          font-size:14px;
          font-weight:bolder; 
      }
    }
      /deep/.el-table tr{
      height: 28px;
    }
    .el-table .el-table__cell {
      padding:0px !important
    }
    /deep/.el-table--small .el-table__cell {
     padding:0px !important 
    }
   
   

  }
</style>